<template>
  <el-container>
    <el-header v-if="userInfo.token ">
      <h2 >欢迎后台管理员: {{userInfo.username}}</h2>
    </el-header>
    <el-header v-else>
      <h2>后台界面</h2>
      <router-link to="/login" class="login">登陆</router-link>
    </el-header>
    <el-container>
      <el-aside width="200px" :class="{collapse: isCollapse}">
        <div class="collapsebtn" @click="isCollapse = !isCollapse" :class="{collapse: isCollapse}">|||</div>
<!--        左侧菜单-->
        <el-menu
          :collapse="isCollapse"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#f00"
          :unique-opened="true"
          :default-active="$route.meta.tag"
          router
          collapse-transition
        >
<!--          默认首页-->
          <el-menu-item index="/home">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>首页</span>
            </template>

          </el-menu-item>

<!--          一级菜单遍历循环-->
          <el-submenu :index="index1+ ''" v-for="(item1,index1) of userInfo.menus" :key="index1">
            <template slot="title"><i :class="item1.icon"></i><span>{{item1.title}}</span></template>
<!--            二级菜单-->
            <el-menu-item :index="item2.url" v-for="(item2,index2) of item1.children" :key="index1 +'-' + index2">
              <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span>{{item2.title}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
<!--        面包屑-->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="item.path" v-for="item of Breadcrumb" :key="item.path">{{item.name}}</el-breadcrumb-item>
        </el-breadcrumb>
<!--        选项卡-->
        <el-card class="box-card">
          <router-view></router-view>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: "home",
    data() {
      return {
        isCollapse: false,
      }
    },
    created() {
      this.$store.dispatch('updatamenu')
    },
    mounted() {
      let leftList = []
      // leftList = this.menuList.filter(item1 => {
      //   // return item1.id  ===
      //   for(var a of this.userInfo.menus) {
      //     return item1.id = a.pid
      //   }
      // })
      // console.log(leftList);
      // // userInfo.forEach(item => {
      // //
      // // })
      for (var a in this.menuList) {//循环筛选 出 父级来
      //  循环 父级中的子级 ？
      //   if(a.children.some(item => {return}))
        for (var b in a.children) {
          if(this.userInfo.menus.some(item => {return item.id == b.id})) {
            leftList.push(a)
            break;
          }
        }
      }
      console.log(leftList)
    },
    computed: {
      ...mapState(["userInfo",'menuList']),
      //面包屑导航
      Breadcrumb() {
        return this.$route.matched
      }
    }
  }
</script>

<style scoped>
  .el-container{
    height: 100%;
  }
  .el-aside{
    background-color: #545c64
  }
  .el-aside.collapse{
    width: 64px !important;
  }
  .collapsebtn{
    width: 100%;
    height: 40px;
    background-color: black;
    color: white;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    line-height: 40px;
  }
  .collapsebtn.collapse{
    width: 64px ;
  }
  .el-menu{
    border: none;
  }
  .el-card{margin-top: 20px}
  .login{float: right}
</style>
